<template>
    <div class="editor-box">
        <div class="editor" style="border: 1px solid #ccc ;width: 1000px;">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />

        <Editor style="height: 400px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" @onChange="updateHtml" />
    </div>
    <div class="btn-box">
        <div class="btn" @click="saveHtml">提交</div>
    </div>
    </div>
   
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css 
import { onBeforeUnmount, ref, shallowRef, onMounted, watch, defineProps, reactive } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { addArticle } from '../../request/api/admin.js'

const emit = defineEmits(['change'])
const mode = 'simple' // 或 'simple'  'default'
const props = defineProps({
    html: {
        type: String,
        default: ''
    }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref(props.html)
watch(props, (newValue, oldValue) => {
    valueHtml.value = newValue.html
})
// 当更新内容时
const updateHtml = (val) => {
    emit('change', valueHtml.value)
    // console.log(valueHtml.value)
}
const toolbarConfig = {
    toolbarKeys: [
        'bold', // 加粗
        'italic', // 斜体
        'through', // 删除线
        'underline', // 下划线
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'color', // 文字颜色
        'insertLink', // 插入链接
        'fontSize', // 字体大小
        'lineHeight', // 行高
        'uploadImage', // 上传图片
        'delIndent', // 缩进
        'indent', // 增进
        'deleteImage',//删除图片
        'divider', // 分割线
        'insertImage', // 网络图片
        'insertTable', // 插入表格
        'justifyCenter', // 居中对齐
        'justifyJustify', // 两端对齐
        'justifyLeft', // 左对齐
        'justifyRight', // 右对齐
        'undo', // 撤销
        'redo', // 重做
        'clearStyle', // 清除格式
        'fullScreen',// 全屏
        'code'

    ],
    excludeKeys: [
        'bgColor', // 背景色
        'blockquote', // 引用
        'codeBlock', // 代码段
        'emotion', // 表情
        'fontFamily', // 字体
        'headerSelect' // 标题
    ]
}
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            //上传图片配置
            server: 'http://127.0.0.1:8088/file/upload', //上传接口地址
            fieldName: 'file', //上传文件名
            methods: 'post',
            metaWithUrl: true, // 参数拼接到 url 上
            // 单个文件上传成功之后
            onSuccess(file, res) {
                console.log(`${file.name} 上传成功`, res);
            },
            // 自定义插入图片
            customInsert(res, insertFn) {
                console.log(res);
                insertFn(res.data.url);
            },
        },
    }
}

// 将编辑好的内容保存到数据库
const saveHtml = async () => {
    let data = reactive({
        title: "shengqi666",
        content: "sfasssssssssssssssssssssssss",
        categoryId: 123456,
        userId: 123456,
        articleImg: "youshoujiux.jpg"

    })
    data.content = editorRef.value.getHtml()
    await addArticle(data).then(res => {
        console.log(res)
    })
    console.log(data.content)
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

onMounted(() => {

})
</script>

<style scoped lang="scss">
.editor {
    margin: 0 auto;
    margin-top: 80px;
}

.btn-box {
    width: 1000px;
    margin: 0 auto;

    .btn {
        margin-right: 10px;
        border: 1px solid #ccc;
        background-color: red;
        height: 40px;
        width: 80px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        border-radius: 20px;

        &:hover {
            background-color: #ccc;
        }

        &:active {
            transform: scale(0.98);
        }
    }
}
</style>